Tipps und Tricks

Die gleichen Farben nutzen

(msc) Sowohl in Photoshop als auch in GoLive ist jeweils eine Palette namens «Farbfelder» zu finden. Da könnte der Webdesigner auf die Idee kommen, eine Kollektion an Farbfeldern in beiden Programmen zu verwenden – schliesslich wäre das der einfachste Weg, sein Farbkonzept bei den HTML-Seiten und bei den Pixelbildern stringent umzusetzen.

Wer auf die Idee kommt, die aktuelle Farbfelder-Sammlung per Drag und Drop von Photoshop nach GoLive zu ziehen, wird enttäuscht: Das geht nämlich nicht, genauso wenig, wie sich einzelne Farbfelder per Maus transferieren lassen. Auch der Umweg über eine Farbfelder-Datei scheint nicht zu klappen: Photoshop kann eine solche zwar über das Fly-Out-Menü und den Befehl «Farbfelder speichern» exportieren. Aber in GoLive gibt es keinen entsprechenden Befehl, um die Farbpalette wieder zu importieren. Damit haben sich die GoLive-Entwickler in der Disziplin Benutzerführung ein «Ungenügend» redlich verdient.

Über den folgenden Trick kriegt man seine Felder aber doch von Photoshop nach GoLive. Dazu muss man die aus Photoshop exportierte ACO-Datei in GoLives Farbfelder-Ordner ablegen. Zu finden ist das Verzeichnis unter «C:\Programme\Adobe\Adobe GoLive CS\Settings\Color Swatches». Danach brauchts einen Neustart von GoLive, worauf der Webdesigner endlich seine Farben über das Flyout-Menü in die Farbfelderpalette laden kann.

Zu beachten gilt es, dass GoLive nur den RGB-Farbraum kennt. Als CMYK aufgebaute Felder werden zu RGB konvertiert, wobei es zu Farbabweichungen kommen kann. Auch das Farbmanagementsystem kann dazu führen, dass die Darstellung von Farbfeldern in GoLive und Photoshop nicht identisch ist.

Einzelne Farben übernimmt man am schnellsten mit dem Pipettenwerkzeug. Dieses in der Palette «Farbe» zu findende Werkzeug saugt Farben von irgend einem Fenster auf – also auch von Photoshop.

Hex-Farbcode aus der Farbpalette kopieren

(msc) Adobe geht offenbar davon aus, dass es auf der grossen weiten Welt keinen einzigen Webprogrammierer gibt, der Stylesheets «von Hand», d.h. direkt in der Quellcode-Ansicht programmiert. Es ist nämlich nicht möglich, aus der Palette oder der Site-Farbensammlung in die Code-Ansicht des CSS-Editors zu übertragen. Frustrierend – denn auch wenn man in seiner Site-Datei feinsäuberlich Farben definiert hat, lassen sich die nicht in die Code-Ansicht des CSS-Editors übernehmen. Der CSS-Editor reagiert nicht auf Drag-and-Drop-Aktionen von den Farbpaletten oder der Site-Farbensammlung. Falls die Style-Anweisungen in der Seite eingebettet sind, lässt sich diese Limitation über die Quellen-Ansicht umgehen: Öffnet man ein Dokument über «Ansicht > Dokument-Modus > Quellcode», dann kann man im Style-Abschnitt den hexadezimalen Farbcode durch einen einfachen Klick auf ein Farbfeld übernehmen.

Arbeitet man an einem externen Style­sheet, gehts am schnellsten, wenn man zur Farbensammlung der Site wechselt, dort ein Farbfeld anklickt, die «Farbe»-Palette öffnet und dort den Modus «RGB-Farbe» aktiviert. Im Feld «Hex-Wert» erscheint der Farb-Code. Diesen markieren Sie per Maus, klicken dann per rechter Maustaste die Markierung an und wählen «Kopieren» aus dem Kontextmenü. Nun können Sie den Farbcode per Zwischenablage ins Stylesheet übernehmen.

Defekte Site-Datei retten

(msc) Wir haben beobachtet, dass GoLive-Site-Dateien beschädigt werden können. Dies scheint vor allem nach dem Update der GoLive-Version zu passieren und äussert sich in Fehlern bei der Site-Verwaltung – es erscheinen Linkfehler, wo keine sind und die Ordnerstruktur wird durcheinandergewürfelt. Die beste Lösung in solchen Fällen ist es, eine komplett leere neue Site anzulegen – also den Befehl «Datei > Neue Web-Site» zu wählen, dann dem Assistenten zu folgen und sich bei den «Optionen für lokale Web-Sites» für «Leere Web-Site» zu entscheiden. Den bisherigen Inhalt der Website kopiert man dann per Finder bzw. Explorer in die neue Website, und zwar (bei GoLive CS) in den Ordner «web-data». Über «Web-Site > Ansicht aktualisieren» liest man dann die bestehenden Daten ein. Farbdefinitionen oder andere Informationen, die man aus der alten Site-Datei retten möchte, lassen sich dann per Drag und Drop übernehmen, indem man die alte und die neue Site-Datei nebeneinander öffnet und die entsprechenden Informationen von der alten in die neue Site zieht.

Vereinsamte Titel vermeiden

(msc) Viele Webdesigner entwickeln ausschliesslich für den Bildschirm und vernachlässigen den Umstand, dass manche Surfer die Webseiten auch drucken. Man versteht das gut, zumal sich beide Medien sehr stark unterscheiden und es einiges an Mühe kostet, sie beide unter einen Hut zu bringen. Und Webdesigner handeln sich einiges an zusätzlichem Ärger ein, wenn sie die Seiten fürs Papier optimieren. Die Steuerung des Seitenumbruchs ist so ein Fall; naturgemäss stellt sich dieses Problem nur beim Drucken.

CSS stellt für die Kontrolle des Seitenumbruchs eine Reihe von Anweisungen bereit. Mit page-break-before und page-break-after geben Sie vor, ob ein Seitenumbruch vor oder nach dem Element zulässig ist oder nicht. Zu diesen beiden Direktiven stehen unter anderem die folgenden Attribute zur Verfügung: always (verwende immer einen Seitenumbruch), avoid (vermeide den Umbruch, füge also nie einen Seitenumbruch nach dem aktuellen Element ein.

Schade nur, dass auch die Browser-Hersteller dem Druck wenig Bedeutung beimessen und die Umbruch-Anweisungen mehrheitlich ignorieren. Im Moment unterstützt nur der Internet Explorer ab Version 4 Break-Anweisungen. Folgende Stylesheet-Angabe führt dazu, dass jeder Titel der Stufe 1 (h1) auf ein neues Blatt zu stehen kommt:

<style type="text/css" media="print"><!--
h1 { page-break-before:always }
--></style>

Folgender Code verhindert, dass der Titel als letzte Zeile auf ein Blatt zu stehen kommt, d.h. ohne nachfolgenden Text:

<style type="text/css" media="print"><!--
h1 {page-break-after: avoid}
--></style>

CSS-Level 2 hält noch weitere nützliche Möglichkeiten im Bereich des Druckens bereit. Mit orphans würden sich Schusterjungen, mit widows Hurenkinder vermeiden lassen. Die folgende Anweisung würde festlegen, dass mindestens zwei Zeilen im ersten bzw. letzten Absatz des Blattes stehen müssen:

p { orphans:3; widows:3}

Die folgende Anweisung würde vorgeben, dass die Seite im Querformat gedruckt wird:

@page { size:landscape; }

... doch leider unterstützt im Moment kein aktueller Browser diese an sich nützlichen CSS-Direktiven.

CSS / HTML

Richtige Anführungszeichen setzen

(msc) Das Internet ist typografische Steinzeit. Kaum ein Webdesigner, der auf Details wie korrekte Anführungszeichen achtet. Dabei wäre es doch so einfach – niemand müsste sich den Tastaturcode für Guillemets oder den HTML-Namen merken (&laquo; steht für «, &raquo; für »). HTML kennt nämlich das Element q. Es steht für «Quote» und wird vom Browser mit Anführungszeichen umschlossen. Die folgende Anweisung im Stylesheet führt dazu, dass Zitate automatisch mit den richtigen Anführungszeichen gesetzt werden.

q {Quotes: "\00AB" "\00BB";}
q:before { content:open-quote; }
q:after { content:close-quote; }

\00AB und 00BB repräsentieren das öffnende und das schliessende Guillemet, jeweils als Unicode-Angabe.

Nun werden Anführungszeichen automatisch richtig codiert. Die folgende Zeile <p>Hans sagt <q>Hallo</q> erscheint im Browser wie folgt:

Im Stylesheet kann man als Quotes auch Bilder zuordnen, die dann als an- und abführendes Zitatesymbol verwendet werden. Die Bilder werden wie üblich über ein URL-Statement zugewiesen:

q:before{content:url(quoteopen.gif)}
q:after{content:url(quoteclose.gif)}

Wie es aussieht, hängt von der grafischen Gestaltung der Anführungszeichen ab. Als Beispiel eine Variante mit klotzigen Anführungszeichen:

Hans sagt Hallo

Besonders gut eignet sich ein Style­sheet mit individuellen Anführungszeichen für eine Zitate-Seite. Auf dieser kann man nebst dem Quote-Tag auch blockquote verwenden. Dieses Tag setzt einen Textblock vom Rest des Dokuments ab und rückt das Zitat links und rechts um einige Pixel ein.

Die Darstellung ist übrigens nur in einem Nicht-Microsoft-Browser korrekt.

GoLive

Brauchbare Default-Tabelle

(dl) Die Tabelle, die aus der Objektepalette ins Layout gezogen werden kann, ist unpraktisch: meist benötigt man keinen Rand, muss diesen also jedes Mal auf 0 setzen; meist will man keine Tabellenbreite von genau 180 Pixeln, weshalb «automatisch» eine bessere Defaultbreite wäre; und die vertikale Ausrichtung ist viel häufiger «oben» als «Standard» (was soviel heisst wie zentriert).

In GoLive 6 kann man eigene Tabellen als Code-Snippets in der Objektepalette ablegen. In GoLive CS gibt es dafür nun die Bibliothek. Im Reiter «Auszüge» unter «Anwendungsweit» befindet sich ein Ordner «Tabellen». Man kann seine Tabelle auch direkt unter «Anwendungsweit» oder in einem eigenen Ordner ablegen. Die hier gespeicherten Bausteine sind Dateien, die man unter \Settings\Library\MarkupSnippets im GoLive-CS-Ordner findet und daher auch auf einen anderen Computer kopieren kann. In der Bibliothekspalette lassen sich diese Dateien per Doppelklick öffnen und bearbeiten.